<%@ page import="com.lagou.task.service.StudentService" %>
<%@ page import="com.lagou.task.entity.Student" %>
<%@ page import="java.util.List" %>

<%--
  Created by IntelliJ IDEA.
  User: liuyunkai
  Date: 2021/1/9
  Time: 6:55 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>学生信息显示</title>
    <%--导入bootstrap样式--%>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
</head>
<body style="padding: 100px">
<div class="container-fluid">
    <c:import url="_header.jsp"/>
    <!--定义一个内联的div块-->
    <div class="form-inline">
        <!--定义按钮-->
        <div class="form-inline">
            <button type="button" class="btn btn-info" id="btn-add">新增</button>
            <button type="button" class="btn btn-info" id="btn-delete">删除</button>
            <button type="button" class="btn btn-info" id="btn-modify">编辑</button>
        </div>
        <div class="form-inline" style="position:relative; left: 190px; bottom: 33px">
            <form class="form-horizontal" action="find">
                <div class="form-group">
                    <button type="submit" class="btn btn-info" id="btn-select">查询</button>
                </div>
                <!--定义搜索框-->
                <div class="form-group" style="position: relative; left: 40px">
                    <input type="text" class="form-control" placeholder="按工号查询" id="selectById" name="selectById">
                </div>
            </form>
        </div>
    </div>
    <%--添加成功提示--%>
    <c:set var="addSuccess" value="${addSuccess}"/>
    <c:if test="${addSuccess != null}">
        <div class="alert alert-success" id="addSuccess">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>添加成功！</strong>
        </div>
    </c:if>
    <%--添加错误提示--%>
    <c:set var="addError" value="${addError}"/>
    <c:if test="${addError != null}">
        <div class="alert alert-danger" id="addError">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>添加学生有误！学号重复！</strong>
        </div>
    </c:if>
    <%--<% String addError = (String) request.getAttribute("addError");
        if (addError != null) { %>
    <div class="alert alert-danger" id="addError">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>添加学生有误！学号重复！</strong>
    </div>
    <%}%>--%>

    <%--修改成功提示--%>
    <c:set var="modifySuccess" value="${modifySuccess}"/>
    <c:if test="${modifySuccess != null}">
        <div class="alert alert-success" id="modifySuccess">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>修改学生信息成功！</strong>
        </div>
    </c:if>
    <%--<% String modifySuccess = (String) request.getAttribute("modifySuccess");
        if (modifySuccess != null) { %>
    <div class="alert alert-success" id="modifySuccess">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>修改学生信息成功！</strong>
    </div>
    <%}%>--%>
    <%--查找失败提示--%>
    <c:set var="findError" value="${findError}"/>
    <c:if test="${findError != null}">
        <div class="alert alert-danger" id="findError">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>暂无该学号学生！</strong>
        </div>
    </c:if>
    <c:set var="findNull" value="${findNull}"/>
    <c:if test="${findNull != null}">
        <div class="alert alert-danger" id="findNull">
            <a href="#" class="close" data-dismiss="alert">&times;</a>
            <strong>请输入正确学号！</strong>
        </div>
    </c:if>
    <!--定义表格-->
    <div class="table-responsive">
        <c:set var="totalStudents" scope="request" value="${requestScope.totalStudents}" />
        <c:set var="studentPerPage" scope="request" value="${requestScope.studentPerPage}" />
        <c:set var="totalPages" scope="request" value="${requestScope.totalPages}" />
        <c:set var="beginIndex" scope="request" value="${requestScope.beginIndex}" />
        <c:set var="endIndex" scope="request" value="${requestScope.endIndex}" />
        <c:set var="page" scope="request" value="${requestScope.page}" />
        <c:set var="students" scope="request" value="${requestScope.students}" />
        <c:set var="currentStudents" scope="request" value="${requestScope.students.subList(beginIndex,endIndex)}" />

        <table class="table table-hover">
            <thead>
            <tr>
                <th></th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>email</th>
                <th>班级</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody id="userTbody">
                <!-- 显示学生信息 -->
                <c:forEach var="student" items="${currentStudents}">
                    <tr class="default-color0">
                        <td><input type="checkbox"></td>
                        <td>${student.getId()}</td>
                        <td>${student.getName()}</td>
                        <td>${student.getSex()}</td>
                        <td>${student.getBirth()}</td>
                        <td>${student.getEmail()}</td>
                        <td>${student.getClassName()}</td>
                        <td>${student.getNote()}</td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>

    <%--分页功能--%>
    <div class="text-center">
        <nav>
            <ul class="pagination">
                <li><a href="<c:url value="/list?page=1"/>">首页</a></li>
                <li><a href="<c:url value="/list?page=${page-1>1?page-1:1}"/>">&laquo;</a></li>

                <c:forEach begin="1" end="${totalPages}" varStatus="loop">
                    <c:set var="active" value="${loop.index==page?'active':''}"/>
                    <li class="${active}"><a href="<c:url value="/list?page=${loop.index}"/>">${loop.index}</a></li>
                </c:forEach>
                <li>
                    <a href="<c:url value="/list?page=${page+1<totalPages?page+1:totalPages}"/>">&raquo;</a>
                </li>
                <li><a href="<c:url value="/list?page=${totalPages}"/>">尾页</a></li>
            </ul>
        </nav>
    </div>

</div>
<%--增加用户--%>
<c:import url="add.jsp"/>
<%--删除用户--%>
<c:import url="delete.jsp"/>
<%--修改用户--%>
<c:import url="modify.jsp"/>


<%--导入js插件--%>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    /* 设置提示提示存活时间 */
    $("#addError").delay(2000).fadeOut();
    $("#addSuccess").delay(2000).fadeOut();
    $("#modifySuccess").delay(2000).fadeOut();
    $("#findError").delay(2000).fadeOut();
    $("#findNull").delay(2000).fadeOut();

    /* 添加学生 */
    $("#btn-add").click(function () {
        $("#addModal").modal("toggle");
        // 设置提交按钮
        $("#add").attr("disabled", "disabled");

        // 学生学号验证
        var regId = /^[0-9]{8}$/;
        $("[name='id']").focus(function () {
            var id_focus = $("[name='id']").val();
            if (!regId.test(id_focus)) {
                $("[name='id']").parent().addClass("has-error");
            }
        });
        $("[name='id']").blur(function () {
            var id_blur = $("[name='id']").val();
            if (regId.test(id_blur)) {
                $("[name='id']").parent().removeClass("has-error");
                $("[name='id']").parent().addClass("has-success");
            }
        });

        // 学生姓名验证
        var regName = /^[\u4e00-\u9fa5]{1,10}$/;
        $("[name='name']").focus(function () {
            var name_focus = $("[name='name']").val();
            if (!regName.test(name_focus)) {
                $("[name='name']").parent().addClass("has-error");
            }
        });
        $("[name='name']").blur(function () {
            var name_blur = $("[name='name']").val();
            if (regName.test(name_blur)) {
                $("[name='name']").parent().removeClass("has-error");
                $("[name='name']").parent().addClass("has-success");
            }
        });

        // 出生日期验证
        var regBirth = /^\d{4}-\d{1,2}-\d{1,2}/;
        $("[name='birth']").focus(function () {
            var birth_focus = $("[name='birth']").val();
            if (!regBirth.test(birth_focus)) {
                $("[name='birth']").parent().addClass("has-error");
            }
        });
        $("[name='birth']").blur(function () {
            var birth_blur = $("[name='birth']").val();
            if (regBirth.test(birth_blur)) {
                $("[name='birth']").parent().removeClass("has-error");
                $("[name='birth']").parent().addClass("has-success");
            }
        });

        // email验证
        var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        $("[name='email']").focus(function () {
            var email_focus = $("[name='email']").val();
            if (!regEmail.test(email_focus)) {
                $("[name='email']").parent().addClass("has-error");
            }
        });
        $("[name='email']").blur(function () {
            var email_blur = $("[name='email']").val();
            if (regEmail.test(email_blur)) {
                $("[name='email']").parent().removeClass("has-error");
                $("[name='email']").parent().addClass("has-success");

                // 激活提交按钮
                if (!$("#addForm").find("input").hasClass("has-error")) {
                    $("#add").removeAttr("disabled");
                }
            }
        });

        // 学生班级验证
        var regClassName = /^[0-9]{3}$/;
        $("[name='className']").focus(function () {
            var className_focus = $("[name='className']").val();
            if (!regClassName.test(className_focus)) {
                $("[name='className']").parent().addClass("has-error");
            }
        });
        $("[name='className']").blur(function () {
            var className_blur = $("[name='className']").val();
            if (regClassName.test(className_blur)) {
                $("[name='className']").parent().removeClass("has-error");
                $("[name='className']").parent().addClass("has-success");
            }
        });
        // 清空模态框
        $("#addForm")[0].reset();
    });

    /* 删除学生 */
    $("#btn-delete").click(function () {
        /* 获得选中节点的个数 */
        var count = $("input[type='checkbox']:checked").length;
        // 先清空数据
        $("#deleteUserTbody").empty();
        var text = "";
        var temId = "";
        /* 若有选中，则进入模态框 */
        if (count > 0) {
            $("#deleteModal").modal("toggle");
            /* 遍历找到选中的复选框 */
            $("input[type='checkbox']:checked").each(function () {
                /* 找到对应复选框的行并删除该节点 */
                text += "<tr class='default-color0'>" + $(this).parent().parent().html() + "</tr>";
                // 获得学号并设置name
                temId += $(this).parent().next().text() + " ";

            });
            // 将要删除学生的id放到input的value中
            $("#deleteID").attr("value", temId);
            //var deleteId = $("#deleteID").val();

            $("#deleteUserTbody").append(text);
            $("#delete").click(function () {
                /* 隐藏模态框 */
                $("#deleteModal").modal("hide");
            });
        } else {
            alert("请选择要删除的学生信息！");
        }
    });

    /* 修改学生 */
    $("#btn-modify").click(function () {
        /* 获得选中节点的个数 */
        var count = $("input[type='checkbox']:checked").length;
        var temId = ""
        /* 若有选中，则进入模态框 */
        if (count == 1) {
            $("#modifyModal").modal("toggle");
            /* 遍历找到选中的复选框 */
            $("input[type='checkbox']:checked").each(function () {
                // 获得学号并设置name
                temId = $(this).parent().next().text();
                var modifyName = $(this).parent().next().next().text();
                var modifySex = $(this).parent().next().next().next().text();
                var modifyBirth = $(this).parent().next().next().next().next().text();
                var modifyEmail = $(this).parent().next().next().next().next().next().text();
                var modifyClassName = $(this).parent().next().next().next().next().next().next().text();
                var modifyNote = $(this).parent().next().next().next().next().next().next().next().text();

                // 将选择学生信息显示
                $("[name='modifyId']").attr("value", temId);
                $("[name='modifyName']").attr("value", modifyName);
                $("[name='modifySex']").attr("value", modifySex);
                $("[name='modifyBirth']").attr("value", modifyBirth);
                $("[name='modifyEmail']").attr("value", modifyEmail);
                $("[name='modifyClassName']").attr("value", modifyClassName);
                $("[name='modifyNote']").attr("value", modifyNote);
            });
            // 将要编辑学生的id放到input的value中
            $("#modifyID").attr("value", temId);

        } else if (count > 1) {
            alert("每次只能编辑一条信息！");
        } else {
            alert("请选择要编辑的学生信息！");
        }
    });
</script>
</body>
</html>